<!-- 登录 -->
<template>
  <view class="login">
    <BackHeader />
    <view class="ctx grid" :style="{ height: `calc(100vh - ${height + 20}px)` }">
      <image
        class="login-img"
        src="https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/login_page_img.png"
        mode="widthFix"
      ></image>
      <view class="phone-login">
        <button v-if="!agreeProtocol" class="dialog-btn" @click="showPopup = true">
          <text class="siyuan-medium">手机号快捷登录</text>
          <text class="intel-one-mono-medium">Log in</text>
        </button>
        <button
          v-else
          class="dialog-btn"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          <text class="siyuan-medium">手机号快捷登录</text>
          <text class="intel-one-mono-medium">Log in</text>
        </button>
      </view>
      <!--协议-->
      <view class="protocol">
        <van-checkbox
          :value="agreeProtocol"
          :use-icon-slot="true"
          @change="agreeProtocol = !agreeProtocol"
        >
          <van-icon v-if="agreeProtocol" name="passed" size="10px" />
          <van-icon v-else name="circle" size="10px" />
          <view class="siyuan-medium grey-text">我已阅读并同意《用户协议》和《隐私政策》</view>
        </van-checkbox>
      </view>
    </view>
    <!-- 用户协议&隐私政策授权 -->
    <Protocol
      v-model:show-popup="showPopup"
      @changeAgree="status => (agreeProtocol = status)"
      @clickLogin="clickLogin"
    />
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { useStore } from "vuex";
import BackHeader from "@/components/Header/BackHeader.vue";
import Protocol from "@/components/Popup/Protocol.vue";
import { phoneLogin, saveOpenIdSave } from "@/server/api.js";

const store = useStore();
let height = ref(store.state.headerHeight);
let agreeProtocol = ref(false); // 是否已阅读协议
let showPopup = ref(false);

let saveOpenId = ()=>{
	uni.login({
	  success (res) {
	    if (res.code) {
	      //发起网络请求
		  saveOpenIdSave({
			  code: res.code
		  })
	    } else {
	       Toast('微信登录失败')
	    }
	  }
	})
}

let getPhoneNumber = e => {
  clickLogin(e);
};
// 登录触发
let clickLogin = e => {
  console.log(e);
  phoneLogin({
    loginMethod: 1,
    phoneCode: e.detail.code,
    // phoneCode :'xxxxxx'
  }).then(res => {
    uni.setStorageSync("userToken", res.data.token);
	uni.setStorageSync("verStaff",res.data.verStaff)
    store.commit("setUserToken", res.data.token);
	saveOpenId()
    wx.switchTab({
      url: "/pages/index/index",
    });
	
  });
};
</script>

<style lang="scss" scoped>
.login {
  padding: 40rpx 20rpx 0;
  .ctx {
    position: relative;
    .login-img {
      position: absolute;
      top: 38rpx;
      left: -20rpx;
      width: 100vw;
    }
    .phone-login {
      position: absolute;
      bottom: 186rpx;
      width: 100%;
      padding: 18rpx 0;
      border-top: 2rpx solid #000000;
      border-bottom: 2rpx solid #000000;
      background-color: #ffffff;
      .dialog-btn {
        height: 62rpx;
        background-color: transparent;
        border: none;
        font-size: 26rpx;
        line-height: 62rpx;
        text:first-child {
          margin-right: 100rpx;
        }
      }
    }
    .protocol {
      position: absolute;
      left: 50%;
      bottom: 110rpx;
      width: fit-content;
      transform: translateX(-50%);
      font-size: 18rpx;
      .grey-text {
        margin-left: 18rpx;
        display: inline-block;
      }
    }
  }
}
</style>
